<template>
  <MrCustom bg-color="bg-gradual-blue" is-back/>

  <view v-if="archiveInfo">
    <view class="overturn-box radius-lg" :style="styleA">
      <view class="bg-white radius-lg flex flex-sub flex-direction padding">
        <view class="flex flex-sub justify-between solid-bottom align-center padding-tb">
          <view>记录时间</view>
          <view>
            <uni-datetime-picker :border="false" type="datetime" v-model="archiveInfo.bloodPressureTime"/>
          </view>
        </view>
        <view class="flex flex-sub justify-between solid-bottom align-center padding-tb">
          <view>高压(收缩压)</view>
          <view class="text-right padding-right" >
            <input placeholder="请输入高压" v-model="archiveInfo.bloodPressureHigh">
          </view>
          <view class="text-bold">mmHg</view>
        </view>
        <view class="flex flex-sub justify-between solid-bottom align-center padding-tb">
          <view>低压(舒张压)</view>
          <view class="text-right padding-right" >
            <input placeholder="请输入低压" v-model="archiveInfo.bloodPressureLow">
          </view>
          <view class="text-bold">mmHg</view>
        </view>
        <view class="flex flex-sub justify-between solid-bottom align-center padding-tb">
          <view>脉搏</view>
          <view class="flex flex-sub justify-end text-right padding-right" >
            <input placeholder="请输入脉搏" v-model="archiveInfo.bloodPressurePulse">
          </view>
          <view class="text-bold">次/分钟</view>
        </view>
        <view class="flex flex-direction  padding-top text-df">
          <view class="text-bold">指标正常范围</view>
          <view class="flex flex-sub justify-between text-gray">
            <view>高压：90-139mmHg</view>
            <view>低压：60-89mmHg</view>
          </view>
          <view class="flex flex-sub text-gray">
            脉搏：60-100次/分钟
          </view>
        </view>
      </view>
      <view class=" flex flex-sub flex-direction margin">
        <button class="cu-btn lg bg-blue" @click="submit">确定</button>
      </view>
    </view>
    <view class="overturn-box cu-b2 radius-lg" :style="styleB">
      <view class="bg-white padding radius-lg">
        <view class=" flex flex-sub justify-between align-center padding-bottom solid-bottom">
          <view>
            <MrAvatar :size="100" :src="archiveInfo.photo"></MrAvatar>
          </view>
          <view class="flex flex-sub flex-direction padding">
            <view>
              <text class="text-black text-bold">{{ archiveInfo.realName }}</text>
              <text class="margin-left-xs cu-tag text-lg bg-blue light">{{ archiveInfo.relationship }}</text>
            </view>
          </view>
        </view>
        <view class="margin-top">
          <text class="text-bold text-black margin-right">最近记录</text>
          <text>{{ archiveInfo.bloodPressureTime }}</text>
        </view>
        <view class="margin flex flex-sub justify-between">
          <view>
            <view>收缩压(mmHg)</view>
            <view class="text-black text-sl"> {{ archiveInfo.bloodPressureHigh }}</view>
          </view>
          <view>
            <view>舒张压(mmHg)</view>
            <view class="text-black text-sl">{{ archiveInfo.bloodPressureLow }}</view>
          </view>
          <view>
            <view>脉搏(次/分种)</view>
            <view class="text-black text-sl">{{ archiveInfo.bloodPressurePulse }}</view>
          </view>
        </view>
      </view>

      <view>
        <view class=" flex flex-sub flex-direction margin">
          <button class="cu-btn lg bg-blue" @click="reset">记录新血压记录</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";
import MrAvatar from "@/components/common/MrAvatar.vue";
import api from "@/api";

const archiveInfo = ref()
const styleA = ref('transform:rotateY(0deg)')
const styleB = ref('transform:rotateY(-180deg)')
onLoad((option) => {
  archiveInfo.value = JSON.parse(decodeURIComponent(option.archiveInfo))
  if(archiveInfo.value.bloodPressureHigh){
    styleA.value = 'transform:rotateY(180deg)'
    styleB.value = 'transform:rotateY(0deg)'
  }
})
const showA = () => {
  styleA.value = 'transform:rotateY(180deg)'
  styleB.value = 'transform:rotateY(0deg)'
}
const showB = () => {
  styleA.value = 'transform:rotateY(0deg)'
  styleB.value = 'transform:rotateY(-180deg)'

}


const submit = () => {
  api.archive.setBloodPressure({
    id: archiveInfo.value.id,
    bloodPressureTime: archiveInfo.value.bloodPressureTime,
    bloodPressureHigh: archiveInfo.value.bloodPressureHigh,
    bloodPressureLow: archiveInfo.value.bloodPressureLow,
    bloodPressurePulse: archiveInfo.value.bloodPressurePulse,
  }).then(res => {
    if (res && res.data.code === 0) {
      showA()
      uni.showToast({
        title: res.data.msg
      })
    }
  })
}
const reset = () => {

  showB()

}
</script>

<style scoped>
.overturn-box {
  position: absolute;
  width: 100%;
  height: 90%;
  transition: all 1s;
  backface-visibility: hidden;
  overflow: hidden;
}
</style>